<template>
  <div class="login-container">
    <!-- 背景装饰 -->
    <div class="background-decoration"></div>
    
    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <!-- 头部区域 -->
      <div class="header-section">
        <div class="logo-container">
          <van-image 
            round 
            width="80px" 
            height="80px" 
            :src="defaultAvatarUrl"
            class="logo-image"
          />
        </div>
        <h1 class="welcome-title">欢迎登录</h1>
        <p class="welcome-subtitle">尚庭公寓租房平台</p>
      </div>

      <!-- 表单区域 -->
      <div class="form-section">
        <van-form ref="formRef" class="login-form">
          <van-cell-group inset class="form-group">
            <!-- 手机号输入框 -->
            <van-field
              v-model.trim="loginInfo.phone"
              name="phone"
              required
              type="tel"
              autocomplete="off"
              placeholder="请输入手机号"
              left-icon="phone-o"
              class="input-field"
              :rules="[
                {
                  required: true,
                  pattern: /^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/,
                  message: '请正确填写手机号'
                }
              ]"
            />

            <!-- 验证码输入框 -->
            <van-field
              v-model.trim="loginInfo.code"
              name="code"
              placeholder="请输入验证码"
              clearable
              type="digit"
              maxlength="6"
              autocomplete="off"
              left-icon="shield-o"
              class="input-field"
              :rules="[
                {
                  required: true,
                  pattern: /^\d{6}$/,
                  message: '请正确填写验证码'
                }
              ]"
            >
              <template #button>
                <van-button 
                  @click="getCodeHandle" 
                  size="small" 
                  type="primary"
                  :disabled="codeSendStatus"
                  class="code-button"
                >
                  <div class="code-button-content">
                    <span>{{ codeSendStatus ? "已发送" : "发送验证码" }}</span>
                    <van-count-down
                      v-show="codeSendStatus"
                      ref="countDownRef"
                      @finish="countDownFinishHandle"
                      :time="countDown"
                      :auto-start="false"
                      format="ss"
                    >
                      <template #default="{ seconds }">
                        <span class="countdown-text">{{ `(${seconds}s)` }}</span>
                      </template>
                    </van-count-down>
                  </div>
                </van-button>
              </template>
            </van-field>
          </van-cell-group>

          <!-- 登录按钮 -->
          <div class="button-section">
            <loading-button
              round
              block
              type="primary"
              native-type="submit"
              :loadingClick="onSubmitHandle"
              class="login-button"
            >
              立即登录
            </loading-button>
          </div>
        </van-form>
      </div>

      <!-- 底部信息 -->
      <div class="footer-section">
        <p class="terms-text">
          登录即表示同意
          <span class="terms-link">《用户协议》</span>
          和
          <span class="terms-link">《隐私政策》</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import defaultAvatarUrl from "../../../public/logo.png";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSmsCode } from "@/api/user";
import type { CountDownInstance, FormInstance } from "vant";
import { useUserStore } from "@/store/modules/user";
import LoadingButton from "@/components/LoadingButton/LoadingButton.vue";
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
// 登录信息
const loginInfo = ref({
  phone: "13888888888",
  code: "123456"
});
// 表单实例
const formRef = ref<FormInstance>();
// 验证码发送状态
const codeSendStatus = ref(false);
//#region <倒计时相关>
// 倒计时
const countDown = ref(60 * 1000);
const countDownRef = ref<CountDownInstance>();
// 倒计时开始
const countDownStartHandle = () => {
  countDownRef.value?.start();
  //   修改验证码发送状态
  codeSendStatus.value = true;
};
// 倒计时重置
const countDownResetHandle = () => {
  countDownRef.value?.reset();
  //   修改验证码发送状态
  codeSendStatus.value = false;
};
// 倒计时结束
const countDownFinishHandle = () => {
  countDownResetHandle();
};
//#endregion
// 获取验证码
const getCodeHandle = async () => {
  // 验证字段phone
  await formRef.value?.validate("phone");
  // 开始倒计时
  countDownStartHandle();
  getSmsCode({ phone: loginInfo.value.phone });
};
const onSubmitHandle = async () => {
  console.log("onSubmit");
  // 验证字段
  await formRef.value?.validate();
  // 登录
  await userStore.LoginAction(loginInfo.value);
  // 跳转首页
  await router.replace(
    route.query?.redirect
      ? decodeURIComponent(route.query?.redirect as string)
      : "/"
  );
};
onMounted(() => {
  console.log("route", route);
  console.log("router-onMounted", router);
});
</script>

<style scoped lang="less">
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
  z-index: 1;
}

.content-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 40px 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header-section {
  text-align: center;
  margin-bottom: 40px;
}

.logo-container {
  margin-bottom: 20px;
  
  .logo-image {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border: 3px solid rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease;
    
    &:hover {
      transform: scale(1.05);
    }
  }
}

.welcome-title {
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
  letter-spacing: 0.5px;
}

.welcome-subtitle {
  font-size: 16px;
  color: #7f8c8d;
  margin: 0;
  font-weight: 400;
}

.form-section {
  margin-bottom: 30px;
}

.form-group {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  
  :deep(.van-cell) {
    padding: 16px 20px;
    border-bottom: 1px solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
  }
}

.input-field {
  :deep(.van-field__left-icon) {
    color: #667eea;
    margin-right: 12px;
  }
  
  :deep(.van-field__control) {
    font-size: 16px;
    color: #2c3e50;
    
    &::placeholder {
      color: #bdc3c7;
    }
  }
}

.code-button {
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  border-radius: 8px;
  font-size: 12px;
  padding: 8px 12px;
  min-width: 90px;
  
  &:disabled {
    background: #bdc3c7;
    opacity: 0.7;
  }
}

.code-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: white;
}

.countdown-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
}

.button-section {
  margin-top: 32px;
}

.login-button {
  height: 50px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(102, 126, 234, 0.4);
  }
  
  &:active {
    transform: translateY(0);
  }
  
  :deep(.van-button__text) {
    color: white;
  }
}

.footer-section {
  text-align: center;
  margin-top: 24px;
}

.terms-text {
  font-size: 12px;
  color: #95a5a6;
  margin: 0;
  line-height: 1.5;
}

.terms-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  
  &:hover {
    text-decoration: underline;
  }
}

// 响应式设计
@media (max-width: 480px) {
  .content-wrapper {
    margin: 20px;
    padding: 30px 20px;
    border-radius: 20px;
  }
  
  .welcome-title {
    font-size: 24px;
  }
  
  .welcome-subtitle {
    font-size: 14px;
  }
  
  .login-button {
    height: 48px;
    font-size: 16px;
  }
}

// 暗色模式适配
html.dark {
  .content-wrapper {
    background: rgba(28, 28, 30, 0.95);
    color: #f5f5f5;
  }
  
  .welcome-title {
    color: #f5f5f5;
  }
  
  .welcome-subtitle {
    color: #a0a0a0;
  }
  
  .form-group {
    :deep(.van-cell) {
      background-color: rgba(58, 58, 60, 0.8);
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }
  }
  
  .input-field {
    :deep(.van-field__control) {
      color: #f5f5f5;
      
      &::placeholder {
        color: #8e8e93;
      }
    }
  }
  
  .terms-text {
    color: #8e8e93;
  }
}
</style>
